<template>
    <div class="wenzh">
        <div class="hd">
            <p>{{articleUser}}</p>
            <van-button
                plain
                class="bt2"
                icon="minus"
                type="primary"
                @click="del"
                >
            </van-button>
        </div>
        <div class="by">
            <p class="bt">{{articleTitle}}</p>
            <p class="zw">{{articleContent}}</p>
            <!-- <img src="file:///D:/img/u=1111042886,3206823612&fm=27&gp=0.jpg" alt=""> -->
        </div>
        <div class="ft"></div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        props:{
            articleId:String,
            articleTitle:String, 
            articleContent:String,
            articleUser:String,
            articleImage:String,
        },
        data() {
            return {
                ul: 'file:///D:/img/' + this.articleImage
            }
        },
        mounted() {
            console.log(this.ul);
        },
        methods: {
          getImage (image) {
            return `/common/download?name=${image}`
          },
          del() {
            axios.delete("http://localhost:8087/article/delete/" + this.articleId).then((res)=>{
                console.log(res.data);
                history.go(0);
            })
          }
        }
    }
</script>

<style lang="scss" scoped>
    .wenzh{
        // display: flex;
        // flex-direction: column;
        .hd{
            display: flex;
            padding-top: 4vw;
            padding-left: 5vw;
            position: relative;
            p{
                font-weight: bold;
                font-size: 6vw;
                padding-top: 1vw;
                font-style: italic;
                color: rgb(174, 80, 8);
            }
            ::v-deep .bt2{
                position: absolute;
                width: 10vw;
                height: 10vw;
                right: 3vw;
                font-size: 2vw;
                color: black;
                border: none;
            }
        }
        .by{
            text-align: left;
            padding-left: 5vw;
            padding-right: 5vw;
            .bt{
                font-weight: bold;
                font-size: 5vw;
                padding-top: 2vw;
            }
            .zw{
                font-size: 4vw;
                padding-top: 0.5vw;
                padding-bottom: 6vw;
            }
        }
        .ft{
            height: 1vw;
            background: #eee;
        }
    }
</style>